<template>
  <div class="mybox">
    <div class="header">
      <!-- 抬头 -->
      <van-nav-bar fixed title="黑马优购" left-text="返回" left-arrow style="color: #fff" @click-left="onClickLeft" ></van-nav-bar>
      <!-- 通知内容 -->
      <van-notice-bar
        text="买买买 特大优惠 走过路过不要错过 全场两块 全部两块 "
        left-icon="volume-o"
        background="#ea413a"
        color="#fff"
      />
      <!-- 设置 信息 -->
      <van-row type="flex" justify="end" class="shezhi">
        <van-col span="3">设置</van-col>
        <van-col span="3">
          <van-icon name="chat-o" info="9" size="22px" />
        </van-col>
        <van-col span="4">
          <van-button round type="danger" size="mini" @click="back">退出</van-button>
        </van-col>
      </van-row>
      <!-- 图片 -->
      <div class="imgbox">
        <van-image round width="5rem" height="5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <div class="username">
          <div class="feng">账户名:123456789</div>
          <div class="feng">信用分:123</div>
        </div>
      </div>
      <!-- 关注 -->
      <van-row class="look">
        <van-col span="6">
          <div>1</div>
          <div>商品关注</div>
        </van-col>
        <van-col span="6">
          <div>0</div>
          <div>店铺关注</div>
        </van-col>
        <van-col span="6">
          <div>0</div>
          <div>喜欢的内容</div>
        </van-col>
        <van-col span="6">
          <div>1</div>
          <div>浏览的记录</div>
        </van-col>
      </van-row>
      <!-- 订单信息 -->
    </div>
    <van-row class="orderbox">
      <van-col span="5">
        <div>
          <van-icon name="balance-pay" size="40px" />
        </div>
        <div>待付款</div>
      </van-col>
      <van-col span="5">
        <div>
          <van-icon name="logistics" size="40px" />
        </div>
        <div>待收货</div>
      </van-col>
      <van-col span="5">
        <div>
          <van-icon name="goods-collect-o" size="40px" />
        </div>
        <div>待评价</div>
      </van-col>
      <van-col span="5">
        <div>
          <van-icon name="label-o" size="40px" />
        </div>
        <div>退换/售后</div>
      </van-col>
      <van-col span="4" class="last">
        <div>
          <van-icon name="shop-collect-o" size="40px" />
        </div>
        <div>我的订单</div>
      </van-col>
    </van-row>
    <!-- 白条 -->
    <van-row class="whirebox">
      <van-col span="5">
        <div>20</div>
        <div>黑豆</div>
      </van-col>
      <van-col span="5">
        <div>0</div>
        <div>优惠劵</div>
      </van-col>
      <van-col span="5">
        <div>0.00</div>
        <div>花呗/白条</div>
      </van-col>
      <van-col span="5">
        <div>0</div>
        <div>礼品卡</div>
      </van-col>
      <van-col span="4" class="last">
        <div>
          <van-icon name="pending-payment" size="30px" />
        </div>
        <div>我的钱包</div>
      </van-col>
    </van-row>
    <!-- 猜你喜欢 -->
    <div class="youlike">
      <van-divider :style="{ color: '#000', borderColor: '#000', padding: '0 16px' }">
        猜你喜欢
        <van-icon name="like-o" size="20px" />
      </van-divider>
    </div>
    <van-card
      v-for="(item,index) in goodslist"
      :key="index"
      :num="goodslist[index].goods_number"
      :price="goodslist[index].goods_price"
      :title="goodslist[index].goods_name"
      :thumb="goodslist[index].goods_small_logo"
    ></van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodslist: []
    };
  },
  methods: {
    async getAddList() {
      const { data: res } = await this.$http.get("/goods/search", {
        params: {
          query: this.inputValue,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      });
      if (res.meta.status !== 200) {
        Notify({ type: "danger", message: "获取失败" });
      }
      this.total = res.message.total;
      this.goodslist = res.message.goods.splice(10);
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    back() {
      window.sessionStorage.clear()
      this.$router.push("/login")
    }
  },
  created() {
    this.getAddList();
    this.$store.commit("setIfShow", true);
  }
};
</script>

<style lang="less" scoped>
.mybox {
  background-color: #f8f8f8;
}
.shezhi {
  text-align: center;
  color: #fff;
  padding-top: 12px;
}
.van-notice-bar {
  margin-top: 45px;
}
.header {
  background-color: #f66048;
}

.feng {
  border-radius: 15px;
  border: 1px solid #f84946;
  background-color: #ea413a;
  width: 160px;
  text-align: center;
  color: #fff;
  height: 30px;
  line-height: 30px;
  float: left;
}
.imgbox {
  color: #fff;
  overflow: hidden;
  font-size: 14px;
  .van-image {
    margin: 0 0 25px 25px;
    float: left;
    margin-right: 10px;
  }
}
.username {
  padding-left: 20px;
  div {
    margin: 4px 0;
  }
}
.look {
  text-align: center;
  color: #fff;
  div {
    margin: 5px 0;
  }
}
.orderbox {
  margin: 20px 0;
  text-align: center;
  color: #000;
  background-color: #fff;
  div {
    margin: 5px 0;
  }
  .last {
    border-left: 1px solid #cccccc;
  }
}
.whirebox {
  margin: 20px 0;
  text-align: center;
  color: #000;
  background-color: #fff;
  div :first-child {
    font-size: 20px;
  }
  div {
    margin: 5px 0;
  }
  .last {
    border-left: 1px solid #cccccc;
  }
  .gamebox:last-child {
    font-size: 12px;
    color: #ccc;
    text-align: center;
  }
  .gameboxbox:first-child {
    margin: 10px 0;
  }
  .gameboxbox {
    .gamebox:first-child {
      font-size: 25px;
    }
    .gamebox:last-child {
      font-size: 12px;
      color: #ccc;
      text-align: center;
    }
    background-color: #fff;
    .van-col:last-child {
      text-align: center;
      margin-top: 5px;
    }
    .van-divider {
      font-size: 20px;
    }
    .van-card {
      background-color: #fff;
      .van-image {
        margin: 0 !important;
      }
    }
  }
}
</style>
